<template>
    <div class="father">
        <h1>父组件</h1>
        <h4>父组件的汽车: {{ car }}</h4>
        <h3>父组件的存款: {{ money }}万</h3>
        <button @click="changeChild1Data($refs)">点我修改子组件数据</button>

        <Child1 ref="c1" />
        <Child2 ref="c2" />
    </div>
</template>

<script setup>
    import { ref } from 'vue';
import Child1 from './Child1.vue';
    import Child2 from './Child2.vue';
import { ca } from 'element-plus/es/locales.mjs';
    const car = ref('奔驰e300');
    const money = ref(1000);

    function changeChild1Data(refs) {
        for (let key in refs) {
            //console.log(refs[key].num);
            refs[key].num += 3;
        }
    }

    defineExpose({car, money});

</script>

<style>
    .father {
        width: 500px;
        height: 600px;
        background-color: aqua;
        padding-left: 10px;
        box-sizing: border-box;
    }
</style>